<template>
	<view class="container">
		<view class="title" v-for="(item, index) in catalogList" :key="item.id" @click="handleOpenPage(item.id)">
			<view class="catalog">{{ item.articleTitle }}</view>
		</view>
		<!-- 加载 -->
		<!-- <uni-load-more :status="hasFlag ? 'loading' : isNoMore ? 'noMore' : ''"></uni-load-more> -->
	</view>
</template>
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				hasFlag: true, // 是否还有更多数据要加载
				catalogList: [], //目录列表
				requestObj: {
					typeId: 2, //2帮助中心
					pageSize: 10,
					pageNum: 0,
				},
				isNoMore: false,
			}
		},
		methods: {
			handleOpenPage(id) {
				uni.navigateTo({
					url: '/pages/help/help-detail?id=' + id
				})
			},
			//获取帮助中心目录列表
			async get_article_by_type() {
				if (!this.hasFlag) return // 说明已经没有更多啦

				++this.requestObj.pageNum
				console.log(uni.getStorageSync('userType'))
				if (uni.getStorageSync('userType') == 0) { //雇员
					this.requestObj.typeId = 4
				} else { //雇主
					this.requestObj.typeId = 3
				}
				let res = await this.$fetch(this.$api.get_article_by_type, this.requestObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// 拼接
				this.catalogList = [...this.catalogList, ...res.rows]
				this.hasFlag = this.catalogList.length < res.total
			},
		},
		onLoad() {
			this.get_article_by_type()
		},
		onShareAppMessage() {
			if (uni.getStorageSync('userType') == 1) {
				return {
					title: "足不出户，免费招工",
					desc: "线上招募零工，工价透明，免费使用",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
					success: res => {}
				}
			} else {
				return {
					title: "在家找日结兼职，工种齐全",
					desc: "免费使用，提前在家找日结兼职",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
					success: res => {}
				}
			}
		},
	}
</script>
<style lang="less" scoped>
	page {
		background-color: #FFFFFF;
	}

	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&>.title {
			width: 690rpx;
			height: 100rpx;
			margin-top: 30rpx;
			border-radius: 20rpx;
			background: rgba(252, 201, 40, 0.8); //#FCC928;
			// color: #fffff;
			font-size: 16px;
			display: flex;
			justify-content: center;
			align-items: center;

			&:active {
				opacity: 0.7;
			}
		}
	}
</style>